import React from "react";

class App extends React.Component {
  state = {
    num: 1,
    age: 18,
  };

  render() {
    console.log("Render");
    return (
      <div>
        <h1>App</h1>
        <button
          id="btn"
          onClick={() => {
            console.log("onClick");
            /**
             * 直接修改 state 数据是不OK的。数据会变化，但不会引起组件的更新
             *    不同于 Vue ，React 内没有做数据劫持相关的操作
             */
            // this.state.num++;
            // console.log(this.state.num);

            /**
             * 要修改 state 数据，得使用 this.setState() 来操作
             * 语法:
             *    一、对象语法
             *
             *      setState(stateChange[, callback])
             *
             *    二、函数语法
             *
             *      setState(updater[, callback])
             *          updater:
             *            (state, props) => stateChange
             *
             */

            // this.setState({ num: 2 }, () => {
            //   console.log("callback", this.state.num); // 2
            //   console.log(
            //     "callback",
            //     document.getElementById("btn")?.innerHTML // 2
            //   ); // 1
            // });
            // console.log(this.state.num); // 1
            // console.log(document.getElementById("btn")?.innerHTML); // 1

            // this.setState((state, props) => {
            //   console.log("state", state);
            //   console.log("props", props);
            //   return {
            //     num: state.num + 1,
            //   };
            // });
          }}
        >
          {this.state.num}
        </button>
      </div>
    );
  }
}

export default App;
